Ext.ns('App', 'App.control');


var mappanel = new App.control.mapPanel();

App.control.mapControl = Ext.extend(Ext.Panel, {
	// add tplMarkup as a new property
	tplMarkup: [
		'<img src={url} width="200", height="200"/><br/>',
		'<div id="btn-edit-map"></div>'
	],
	data: null,
	polygonFieldId: null, //the id of the text field which stores the geojson string.
	onEdit: function(btn, e){
		Ext.MessageBox.alert('Data', this.name)
	},
	// startingMarup as a new property
	startingMarkup: 'Loading map...',
	// override initComponent to create and compile the template
	// apply styles to the body of the panel and initialize
	// html to startingMarkup
	initComponent: function() {
		this.tpl = new Ext.Template(this.tplMarkup);
		
		
		Ext.apply(this, {

			width: 205,
			height: 250,
			frame: true,
			html: this.startingMarkup
		});
		// call the superclass's initComponent implementation
		App.control.mapControl.superclass.initComponent.call(this);

	},
	// add a method which updates the details
	updateControl: function(data) {
		this.data = data;
		//generate a google static map url
		var url;
		var path = []
		var x = data.polygon;//geojson format, //x = {"type":"Polygon","coordinates":[[[-83.020916781754,40.002161106657],[-83.020648560853,40.002621341393],[-83.020208678574,40.002950078591],[-83.019741974205,40.003073354632],[-83.018846116395,40.002908986528],[-83.018374047608,40.002013173405],[-83.018910489412,40.000426980057],[-83.01995118651,40.000381777115],[-83.021024070116,40.000681759709],[-83.020916781754,40.002161106657]]]};
		for (var i=0; i<x.coordinates[0].length; i++){
			var xy = x.coordinates[0][i];
			path.push([xy[1] + ',' + xy[0]])
		}
		
		var path_str = path.join('|');
		
		var pt = data.center; //array [x, y]
		
		url = 'http://maps.google.com/maps/api/staticmap?size=200x200&path=fillcolor:0xAA000033|color:0xFFFFFF00|' + path_str + '&sensor=false&markers=color:blue|' + pt[0] + ',' + pt[1];
		
		data = {url: url};
		
		this.tpl.overwrite(this.body, data);
		var s = this;
		var fn = this.onEdit;
		var btn = new Ext.Button({
			text: 'Edit',
			minWidth: '200',
			renderTo: 'btn-edit-map',
			handler: fn,
			scope: s
		}
		)
		
	}
});
// register the App.BookDetail class with an xtype of bookdetail
Ext.reg('app_mapcontrol', App.control.mapControl);


App.control.mapField = Ext.extend(Ext.Window, {
	map: null,
	featureLayer: null,
	onCancel: function(btn, e){
		this.hide()
	},
	onOK: function(btn, e){
		
		//check if only one polygon is drawn		
		if (vector.features.length>1) {
			actions["edit"].control.deactivate();
			actions["drawpolygon"].control.deactivate();
			Ext.MessageBox.alert('Warning', 'Only one polygon is allowed.');
			return
		} else if  (vector.features.length==0) {
			Ext.MessageBox.alert('Warning', 'No polyon was drawn.');
			return
		}
		
		//save the geometry in the field
		var geojson_format = new OpenLayers.Format.GeoJSON();
		//transform the geometry
		var geom = vector.features[0].geometry.clone().transform(new OpenLayers.Projection("EPSG:900913"), new OpenLayers.Projection("EPSG:4326")); 

		this.form.getForm().findField('geometry').setValue(geojson_format.write(geom));
		this.hide()	
		
	},
	clearFeatures: function(){
		var polygonLayer = this.polygonLayer;
		var pointLayer = this.polylineLayer;	
	},
	
    initComponent: function(){
        var config = {
			modal: true,
			maximizable: true,
			layout: 'fit', //in IE it wouldn't draw the panel correctly if this is not specifically defined.
            items: {
				xtype: 'mappanel',
				id: 'app-mappanel'
			},
			closeAction: 'hide'
			,buttons: [{
				text: 'OK',
				handler: this.onOK,
				scope: this
			}, {
				text: 'Cancel',
				handler: this.onCancel,
				scope: this
			}]
        }; // eo config object
        // apply config
		
		
        Ext.apply(this, Ext.apply(this.initialConfig, config));
        
        App.control.mapField.superclass.initComponent.apply(this, arguments);
    } // eo function initComponent
//    ,onRender: function(){
//        this.store.load();
//        
//        App.control.mapField.superclass.onRender.apply(this, arguments);
//    } // eo function onRender
});

Ext.reg('mapfield', App.control.mapField);


